<template>
    <div class="header-top ">
      <CenterContent>
          <el-row>
            <el-col :span="8" class="top-left">
              <ul>
                <li> <el-link @click="$router.push({name:'home'})" :underline="false">商城首页</el-link></li>
                <li>|</li>
                <li><el-link href="https://element.eleme.io" :underline="false">商城官网</el-link></li>
                <li>|</li>
                <li><el-link href="https://element.eleme.io" :underline="false">联系方式</el-link></li>
                <li>|</li>
                <li><el-link :underline="false">关于我们</el-link></li>
              </ul>
            </el-col>
            <el-col :span="8" class="top-right" :offset="6">
              <ul>
                <div v-if="!$store.getters.getIsLogin">
                  <li><el-link @click="$router.push({name:'login'})" :underline="false">登录</el-link></li>
                  <li><el-link @click="$router.push({name:'register'})" :underline="false">注册</el-link></li>
                </div>
                <div v-else>
                  <li ><el-link  @click="personalCenter" :underline="false">欢迎您，{{$store.getters.getUser.name}}</el-link></li>
                  <li >|</li>
                  <li ><el-link @click="personalCenter" :underline="false">个人中心</el-link></li>
                  <li >|</li>
                  <li ><el-link href="https://element.eleme.io" :underline="false">注销账户</el-link></li>
                </div>
                <li>|</li>
                <li><el-link href="https://element.eleme.io" :underline="false">商家入驻</el-link></li>
                <li>|</li>
                <li><el-link href="https://element.eleme.io" :underline="false">手机端</el-link></li>
              </ul>
            </el-col>
          </el-row>
      </CenterContent>
    </div>
</template>

<script>
import CenterContent from './CenterContent'
export default {
  name: 'Header-Shop',
  data () {
    return {
      isLogin: false
    }
  },
  methods: {
    personalCenter () {
      this.$router.push({ name: 'user.index' })
    }
  },
  components: {
    CenterContent
  }

}
</script>

<style scoped lang="scss">
  .header-top {
    height: 30px;
    line-height: 30px;
    .top-left  {
      ul  {
        padding: 0;
        margin: 0;
        list-style: none;
        height: 30px;
        li {
          float: left;
          padding: 0 5px;
        }
      }
    }
    .top-right{
      ul  {
        padding: 0;
        margin: 0;
        list-style: none;
        height: 30px;
        li {
          float: left;
          padding: 0 5px;
        }
      }
    }
  }
</style>
